<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px;
        }

        .notice {
            width: 298px;
            height: 98px;
            margin: 10px;
            border: 1px solid #7c7c7c;
            overflow: hidden;
        }

        .notice-tit {
            height: 27px;
            background-color: #eaeaea;
            position: relative;
        }

        .notice-tit ul {
            position: absolute;
            width: 300px;
            left: -1px;
        }

        .notice-tit ul li {
            float: left;
            width: 58px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-bottom: 1px solid #7c7c7c;
            padding: 0 1px;
        }

        .notice-tit ul a {
            text-decoration: none;
            display: block;
        }

        .notice-tit ul .select {
            background-color: white;
            border-right: 1px solid #7c7c7c;
            border-left: 1px solid #7c7c7c;
            border-bottom: 1px solid white;
            padding: 0;
        }

        /*.notice-tit ul li:hover{
            background-color: white;
            border-right: 1px solid #7c7c7c;
            border-left: 1px solid #7c7c7c;
            border-bottom: 1px solid white;
            padding: 0;
        }*/
    </style>


</head>
<body>
<div class="notice">
    <div class="notice-tit" id="notice-tit">
        <ul>
            <li class="select"><a href="#">公告</a></li>
            <li><a href="#">规则</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">安全</a></li>
            <li><a href="#">公益</a></li>
        </ul>
    </div>
    <div class="notice-con" id="notice-con">
        <div style="display: block">我是内容1</div>
        <div style="display: none">我是内容2</div>
        <div style="display: none">我是内容3</div>
        <div style="display: none">我是内容4</div>
        <div style="display: none">我是内容5</div>
    </div>
</div>

</body>
</html>


<script>
    //获取id封装成一个函数$()方便调用
    function $(id) {
        //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
        return typeof id === "string" ? document.getElementById(id) : id;
    }

    function tab() {
        //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
        var index = 0, timer = null, timer2 = null;
        var titles = $('notice-tit').getElementsByTagName('li');
        var divs = $('notice-con').getElementsByTagName('div');
        for (var j = 0; j < titles.length; j++) {
            //给每个li设置ID
            titles[j].id = j;
            //给每个li绑定悬浮事件
            titles[j].onmouseover = function () {
                //悬浮时首先清除延时定时器
                clearInterval(timer);
                //清除轮播定时器
                clearTimeout(timer2);
                //初始化两个定时器
                timer2 = null;
                timer = null;
                //this的一个引用，因为在setTimeout中this指向window对象
                var that = this;
                //创建一个延时定时器
                timer2 = setTimeout(function () {
                    changeOption(that.id);
                    //鼠标悬浮时改变index的值为当前的id
                    index = that.id;
                }, 500);
            }
            //给每个Li绑定鼠标离开时的事件
            titles[j].onmouseout = function () {
                //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
                //所以鼠标离开后会自动播放下一个tab
                timer = setInterval(autoPlay, 2000);
            }
        }
        //创建之前看是否存在轮播定时器，有就清除掉
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        //创建一个轮播定时器
        timer = setInterval(autoPlay, 2000);

        function autoPlay() {
            index++;
            if (index >= titles.length) {
                index = 0;
            }
            changeOption(index);
        }

        function changeOption(curindex) {
            for (var i = 0; i < titles.length; i++) {
                titles[i].className = "";
                divs[i].style.display = "none";
            }
            titles[curindex].className = "select";
            divs[curindex].style.display = "block";
        }
    }

    tab();
</script>